<template>
  <div class="detailPanel">
    <div class="detailPanel__header" ref="header">
      <m-header slot="header" color='white' :notice='notice'>
        <div slot="left" @click="leftClick">
          <i class="iconfont icon-xiangzuo" />
        </div>
      </m-header>
    </div>
    <div class="detailPanel__background" ref="background" :style="backgroundStyle">
      <div class="filter" :style="filterStyle"></div>
      <div v-show="!isScrollTop" class="warrper" :style="warrperStyle">
        <slot name="background"/>
      </div>
      <div class="fixedTop" ref="fixedTop">
        <slot name="fixedTop"></slot>
      </div>
    </div>
    <div class="detailPanel__content" ref="content">
      <scroll listen-scroll
              @scroll="onScroll"
              ref="scroll"
              :bounce='bounce'
              :loading='true'
              :pullUpLoad='pullUpLoad'
              @pullingUp='pullingUp'
      >
        <slot />
      </scroll>
    </div>
  </div>
</template>
<script>
import MHeader from 'base/m-header'
import Scroll from 'base/scroll'

export default {
  props: {
    image: {
      type: String
    },
    notice: {
      type: String
    },
    bounce: Boolean,
    gradient: Boolean,
    pullUpLoad: {
      type: Boolean,
      default: true
    }
  },
  components: {
    MHeader,
    Scroll
  },
  mounted() {
    this.init()
  },
  data() {
    return {
      scrollY: 0,
      scale: 1,
      zIndex: 0,
      blur: 0,
      isScrollTop: false,
    }
  },
  computed: {
    headerHeight() {
      return this.$refs.header.clientHeight
    },
    backgroundHeight() {
      return this.$refs.background.clientHeight
    },
    minHeight() {
      return this.backgroundHeight - this.headerHeight
    },
    backgroundStyle() {
      return {
        transform: `translate3d(0px, ${this.scrollY}px, 0px)`,
        'z-index': this.zIndex
      }
    },
    filterStyle() {
      const style = {
        transform: `scale(${this.scale})`,
        filter: `blur(${this.gradient ? this.blur : 20}px)`
      }
      if (this.image) {
        style['background-image'] = `url(${this.image})`
      }
      return style
    },
    warrperStyle() {
      return {
        opacity: 1 - this.blur / 15
      }
    }
  },
  methods: {
    init() {
      this.$nextTick(() => {
        let fixedTop = this.$refs.fixedTop
        let fixedTopHeight = fixedTop.offsetHeight
        if (!fixedTop.childNodes.length) {
          fixedTop.style.display = 'none'
          fixedTopHeight = 0
        }
        this.$refs.content.style.top = `${this.backgroundHeight + fixedTopHeight + 5}px`
        this.$refs.scroll.refresh()
      })
    },
    onScroll({ y }) {
      const percent = Math.abs(y / this.minHeight)
      if (y > 0) {
        this.scale = 1 + percent
        this.zIndex = 0
        this.blur = 0        
      } else {
        this.scrollY = Math.max(y, -this.minHeight)
        this.zIndex = 2
        this.blur = Math.min(20, percent * 20)
      }

      const isScrollTop = y <= -(this.minHeight)
      if (isScrollTop && !this.isScrollTop) {
        this.$emit('scrollTop', isScrollTop)
      } else if (!isScrollTop && this.isScrollTop){
        this.$emit('scrollTop', isScrollTop)
      }
      this.isScrollTop = isScrollTop

      this.$emit('scroll', this.scrollY)
    },
    leftClick() {
      this.$emit('leftClick')
    },
    enable() {
      this.$refs.scroll.enable()
    },
    disable() {
      this.$refs.scroll.disable()
    },
    goTop() {
      this.$refs.scroll.scrollTo(0, -this.minHeight, 0)
    },
    refresh() {
      this.$refs.scroll.refresh()
    },
    pullingUp(finish) {
      this.$emit('pullUpLoadEvent', finish)
    }
  },
}
</script>
<style lang="less" scoped>
.detailPanel{
  position: relative;
  height: 100%;
  .detailPanel__header{
    position: fixed;
    top: 0;
    height: 50px;
    width: 100%;
    z-index: 3;
    .filter{
      position: absolute;
      width: 100%;
      height: 100%;
      background-size: 100%;
      background-position: bottom;
    }
  }
  .detailPanel__background{
    position: relative;
    height: 40%;
    background-color: white;
    .filter{
      width: 100%;
      height: 100%;
      background-size: 100% 100%;
      transform-origin: top;
    }
    .warrper{
      height: 100%;
      position: absolute;
      top: 0px;
      width: 100%;
    }
    .fixedTop{
      width: 100%;
      height: 40px;
      line-height: 40px;
      background-color: white;
    }
  }
  .detailPanel__content{
    position: fixed;
    width: 100%;
    top: 0;
    bottom: 0;
    z-index: 1;
  }
}
</style>
